/* eslint-disable no-param-reassign */
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import { IAuthState } from "../interfaces/IAuthentication";
import { RootState } from "./appStore";

const initialState: IAuthState = {
  firebaseUID: "",
  userName: "",
  userToken: "",
  userEmail: "",
  sessionTimedOut: false,
  isLoading: false,
  isLoggedIn: false,
  darkMode: false,
};

// The function below is called a thunk and allows us to perform async logic. It
// can be dispatched like a regular action: `dispatch(incrementAsync(10))`. This
// will call the thunk with the `dispatch` function as the first argument. Async
// code can then be executed and other actions can be dispatched. Thunks are
// typically used to make async requests.
/*
export const incrementAsync = createAsyncThunk(
  "counter/fetchCount",
  async (amount: number) => {
    const response = await fetchCount(amount);
    // The value we return becomes the `fulfilled` action payload
    return response.data;
  }
);
*/

export const authSlice = createSlice({
  name: "auth",
  initialState,
  // The `reducers` field lets us define reducers
  // and generate associated actions
  reducers: {
    // Use the PayloadAction type to declare the contents of `action.payload`
    userLoggedIn: (state, action: PayloadAction<IAuthState>) => {
      state.firebaseUID = action.payload.firebaseUID;
      state.userEmail = action.payload.userEmail;
      state.userName = action.payload.userName;
      state.userToken = action.payload.userToken;
      state.sessionTimedOut = action.payload.sessionTimedOut;
      state.isLoading = false;
      state.isLoggedIn = action.payload.isLoggedIn;
    },
    userLoggedOut: (state) => {
      state.firebaseUID = "";
      state.userEmail = "";
      state.userName = "";
      state.userToken = "";
      state.sessionTimedOut = false;
      state.isLoading = false;
      state.isLoggedIn = false;
    },
    userRegistered: (state, action: PayloadAction<IAuthState>) => {
      state.userEmail = action.payload.userEmail;
      state.userName = action.payload.userName;
      state.userToken = action.payload.userToken;
      state.sessionTimedOut = action.payload.sessionTimedOut;
      state.isLoading = false;
      state.isLoggedIn = true;
    },
    userProfileUpdated: (state, action: PayloadAction<IAuthState>) => {
      state.userEmail = action.payload.userEmail;
      state.userName = action.payload.userName;
      state.firebaseUID = action.payload.firebaseUID;
      state.sessionTimedOut = action.payload.sessionTimedOut;
      state.isLoading = false;
    },
  },
  // The `extraReducers` field lets the slice handle actions defined elsewhere,
  // including actions generated by createAsyncThunk or in other slices.
  /*
    extraReducers: (builder) => {
    builder
      .addCase(incrementAsync.pending, (state) => {
        state.status = "loading";
      })
      .addCase(incrementAsync.fulfilled, (state, action) => {
        state.status = "idle";
        state.value += action.payload;
      });
    },
   */
});

export const {
  userLoggedIn,
  userLoggedOut,
  userRegistered,
  userProfileUpdated,
} = authSlice.actions;

// The function below is called a selector and allows us to select a value from
// the state. Selectors can also be defined inline where they're used instead of
// in the slice file. For example:
// `useSelector((state: RootState) => state.counter.value)`
export const selectAuthState = (state: RootState): IAuthState => state.auth;

// export const selectCount = (state: RootState) => state.counter.value;

// We can also write thunks by hand, which may contain
// both sync and async logic.
// Here's an example of conditionally dispatching
// actions based on current state.
/*
export const incrementIfOdd =
  (amount: number): AppThunk =>
  (dispatch, getState) => {
    const currentValue = selectCount(getState());
    if (currentValue % 2 === 1) {
      dispatch(incrementByAmount(amount));
    }
  };
*/
export default authSlice.reducer;
